<template>
  <div class="app-container">
    <el-table border style="margin-bottom: 20px;" :data="menuPermissionList" :expand-row-keys="expandKeys" row-key="id">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="toCode" label="跳转权限值" />
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <FengButton :disabled="row.level === 4" type="primary" icon="el-icon-plus" size="mini"
            @click="toAddPermission(row)" :title="getAddTitle(row.level)" />

          <FengButton type="primary" icon="el-icon-edit" size="mini" :disabled="row.level === 1"
            @click="toUpdatePermission(row)" :title="row.level === 4 ? '修改功能' : '修改菜单'" />

          <FengButton :disabled="row.level === 1" type="danger" icon="el-icon-delete" size="mini"
            @click="removePermission(row)" title="删除" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改的对话框 -->
    <el-dialog :visible.sync="dialogPermissionVisible" :title="dialogTitle" @close="resetData">
      <el-form ref="permission" :model="permission" :rules="permissionRules" label-width="120px">
        <el-form-item label="父级名称" v-if="permission.level > 2 && !permission.id">
          <el-input :value="permission.pname" disabled />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="permission.name" />
        </el-form-item>

        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="permission.code" />
        </el-form-item>

        <el-form-item label="跳转路由权限值" prop="toCode" v-if="permission.level === 4">
          <el-input v-model="permission.toCode" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetData">取 消</el-button>
        <el-button type="primary" @click="addOrUpdatePermission">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 菜单权限校验的规则
const menuRules = { 
  name: [{required: true, message: '名称必须输入'}],
  code: [{required: true, message: '权限值必须输入'}],
}

// 按钮功能权限校验的规则
const btnRules = { 
  name: [{required: true, message: '名称必须输入'}],
  code: [{required: true, trigger: 'blur', message: '功能权限值必须输入'}]
}

export default {
  name: 'PermissionList',
  data() {
    return {
      menuPermissionList: [],
      expandKeys: [],
      dialogPermissionVisible: false,
      permission: {
        level: 0,
        name: '',
        code: '',
        toCode: ''
      },
    }
  },
  mounted() {
    this.fetchPermissionList();
  },
  computed: {
    dialogTitle() {
      const { id, level } = this.permission
      if (id) {
        return level === 4 ? '修改功能' : '修改菜单'
      } else {
        return level === 4 ? '添加功能' : `添加${level === 2 ? '一级' : '二级'}菜单`
      }
    },
    permissionRules () { //根据权限的等级来计算确定校验规则
      return this.permission.level===4 ? btnRules : menuRules
    },
  },
  methods: {
    //获取List数据
    async fetchPermissionList() {
      const result = await this.$API.permission.getPermissionList()
      this.menuPermissionList = result.data.children
      this.expandKeys = [this.menuPermissionList[0].id]
    },
    // 根据级别得到要显示的添加dialog的标题
    getAddTitle(level) {
      if (level === 1 || level === 2) {
        return '添加菜单'
      } else if (level === 3) {
        return '添加功能'
      }
    },
    //点击删除
    removePermission(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const result = await this.$API.permission.removePermission(row.id);
        this.$message.success(result.message || '删除成功!')
        this.fetchPermissionList();
      }).catch(error => {
        if (error === 'cancel') {
          this.$message({ type: 'info', message: '已取消删除' })
        }
      })
    },
    //点击添加
    toAddPermission(row) {
      this.dialogPermissionVisible = true
      this.permission.pid = row.id
      this.permission.level = row.level + 1
      this.permission.type = this.permission.level===4 ? 2 : 1
      this.permission.pname = row.name // 用于显示父名称, 但提交请求时是不需要的
       // 清除校验(必须在界面更新之后)
       this.$nextTick(() => this.$refs.permission.clearValidate())
    },
    //点击修改
    toUpdatePermission(row) {
      this.dialogPermissionVisible = true
      this.permission = {...row};
      this.permission.type = this.permission.level===4 ? 2 : 1
      this.$nextTick(() => this.$refs.permission.clearValidate())
    },
    resetData() {
      this.dialogPermissionVisible = false
      this.permission = {
        level: 0,
        name: '',
        code: '',
        toCode: ''
      }
    },
    //提交添加或修改的内容
    addOrUpdatePermission() {
      this.$refs.permission.validate(async valid => {
        if(valid){
          const {pname, ...perm} = this.permission // pname不需要携带
          const result = await this.$API.permission[perm.id ? 'updatePermission' : 'addPermission'](perm)
          this.$message.success(result.message || `${perm.id ? '修改' : '添加'}成功!`)
          this.resetData()
          this.fetchPermissionList()
        }
      });
    },

  },
}
</script>